<template>
    <div class="container">
        <!-- 顶部导航 -->
        <nav class="nav">
            <!-- 首页按钮 -->
            <div class="home-btn">
                <el-button type="primary" plain @click="goHome">
                    <el-icon><HomeFilled /></el-icon>
                    <RouterLink to="/"><span>首页</span></RouterLink>
                </el-button>
            </div>
            <h1 class="nav-title">软件测试学习路径</h1>
            <div class="nav-user">
                <span class="progress">学习进度 33%</span>
                <div class="user-info">
                    <span>张伟明</span>
                    <el-avatar :size="32">
                        <el-icon><User /></el-icon>
                    </el-avatar>
                </div>
            </div>
        </nav>
        <!-- 主要内容区域 -->
        <div class="main">
            <!-- 入门阶段 -->
            <section class="stage">
                <div class="stage-header">
                    <div class="stage-icon stage-icon-active">
                        <el-icon color="white"><Flag /></el-icon>
                    </div>
                    <h2 class="stage-title">入门阶段</h2>
                </div>
                <div class="course-grid">
                    <!-- 软件测试基础课程卡片 -->
                    <div class="course-card">
                        <h3 class="course-title">软件测试基础</h3>
                        <p class="course-requirement">学习要求：热爱</p>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 60%"></div>
                        </div>
                        <button class="btn btn-primary !rounded-button">继续学习</button>
                    </div>
                    <!-- Fiddler 抓包工具课程卡片 -->
                    <div class="course-card">
                        <h3 class="course-title">Fiddler 抓包工具</h3>
                        <p class="course-requirement">学习要求：热爱</p>
                        <p class="course-locked">完成软件测试基础课程后解锁</p>
                        <button disabled class="btn btn-disabled !rounded-button">待解锁</button>
                    </div>
                </div>
            </section>
            <!-- 中级阶段 -->
            <section class="stage">
                <div class="stage-header">
                    <div class="stage-icon">
                        <el-icon color="#666"><Cpu /></el-icon>
                    </div>
                    <h2 class="stage-title">中级阶段</h2>
                </div>
                <div class="course-grid">
                    <!-- Python 基础课程卡片 -->
                    <div class="course-card">
                        <h3 class="course-title">Python 基础</h3>
                        <p class="course-requirement">学习要求：熟练掌握</p>
                        <p class="course-locked">完成入门阶段全部课程后解锁</p>
                        <button disabled class="btn btn-disabled !rounded-button">待解锁</button>
                    </div>
                    <!-- Web 自动化测试课程卡片 -->
                    <div class="course-card">
                        <h3 class="course-title">Web 自动化测试</h3>
                        <p class="course-requirement">学习要求：熟练掌握</p>
                        <p class="course-locked">完成 Python 基础课程后解锁</p>
                        <button disabled class="btn btn-disabled !rounded-button">待解锁</button>
                    </div>
                </div>
            </section>
            <!-- 高级阶段 -->
            <section class="stage">
                <div class="stage-header">
                    <div class="stage-icon">
                        <el-icon color="#666"><Trophy /></el-icon>
                    </div>
                    <h2 class="stage-title">高级阶段</h2>
                </div>
                <div class="course-grid">
                    <!-- JMeter 性能测试课程卡片 -->
                    <div class="course-card">
                        <h3 class="course-title">性能测试 (JMeter)</h3>
                        <p class="course-requirement">学习要求：熟练掌握</p>
                        <p class="course-locked">完成中级阶段全部课程后解锁</p>
                        <button disabled class="btn btn-disabled !rounded-button">待解锁</button>
                    </div>
                    <!-- LoadRunner 性能测试课程卡片 -->
                    <div class="course-card">
                        <h3 class="course-title">性能测试 (LoadRunner)</h3>
                        <p class="course-requirement">学习要求：熟练掌握</p>
                        <p class="course-locked">完成 JMeter 性能测试课程后解锁</p>
                        <button disabled class="btn btn-disabled !rounded-button">待解锁</button>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { User, Flag, Cpu, Trophy, HomeFilled } from '@element-plus/icons-vue'

const goHome = () => {
    // 跳转到首页的逻辑
    console.log('跳转到首页');
}
</script>

<style scoped>
.container {
    min-height: 100vh;
    background-color: #f9fafb;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 首页按钮样式 */
.home-btn {
    display: flex;
    align-items: center;
}

:deep(.home-btn .el-button) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

:deep(.home-btn .el-button .el-icon) {
    font-size: 1.25rem;
}

.nav-title {
    font-size: 1.25rem;
    font-weight: 500;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress {
    color: #4f46e5;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main {
    max-width: 1024px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.stage {
    margin-bottom: 3rem;
}

.stage-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.stage-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage-icon-active {
    background-color: #4f46e5;
}

.stage-title {
    font-size: 1.25rem;
    font-weight: 500;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.course-card {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.course-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.course-requirement {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.course-locked {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.progress-bar {
    height: 0.5rem;
    background-color: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background-color: #4f46e5;
    border-radius: 9999px;
}

.btn {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-primary {
    background-color: #4f46e5;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    border: none;
    cursor: not-allowed;
}

.el-avatar {
    background-color: #f3f4f6;
}
.router-link-active {
  text-decoration: none;
  color: #fff;
}
a {
  text-decoration: none;
  color: black;
}

</style>